<template>
  <div class="video">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="大家都在搜~~~"
      @click="goSearch"
    >
      <template #left>
        <div class="img" @click="show = true">
          <img src="../assets/home/my.svg" alt="" />
        </div>
      </template>
    </van-search>

    <!-- 我的信息 -->
    <van-popup v-model="show" position="left" :style="{ height: '100%' }">
      <Myslef></Myslef>
    </van-popup>

    <!-- 视频标签列表 -->
    <van-tabs v-model="active" sticky>
      <van-tab title="全部">
        <div class="main">
          <!-- 视频播放 -->
          <div class="video-box" v-for="(item, index) in allData" :key="index">
            <video class="mv" :src="item.mvUrl" controls="controls"></video>

            <div class="mvtext">
              <div class="mvname">{{ item.name }}</div>
              <div class="praiser">{{ item.artistName }}</div>
              <div class="playnum">
                播放次数：<span>{{ item.playCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="最新">
        <div class="main">
          <!-- 视频播放 -->
          <div class="video-box" v-for="(item, index) in newsData" :key="index">
            <video class="mv" :src="item.mvUrl" controls="controls"></video>

            <div class="mvtext">
              <div class="mvname">{{ item.name }}</div>
              <div class="praiser">{{ item.artistName }}</div>
              <div class="playnum">
                播放次数：<span>{{ item.playCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="网易云出品">
        <div class="main">
          <!-- 视频播放 -->
          <div class="video-box" v-for="(item, index) in yunData" :key="index">
            <video class="mv" :src="item.mvUrl" controls="controls"></video>

            <div class="mvtext">
              <div class="mvname">{{ item.name }}</div>
              <div class="praiser">{{ item.artistName }}</div>
              <div class="playnum">
                播放次数：<span>{{ item.playCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Myslef from "../components/Myself.vue";
export default {
  name: "Video",

  components: {
    Myslef,
  },

  data() {
    return {
      value: "",

      show: false,

      active: 0,

      //视频列表标签数据
      videolistData: [],

      //全部视频数据
      allData: [],

      //最新视频数据
      newsData: [],

      //网易云出品视频数据
      yunData: [],
    };
  },

  created() {
    //获取全部的视频
    this.getAll();

    //获取最新的视频
    this.getNews();

    //获取网易云出品的视频
    this.getYun();
  },

  methods: {
    //跳转到搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },

    //获取全部的视频
    getAll() {
      this.axios({
        method: "get",
        url: "/mv/all",
        params: {
          limit: 10,
        },
      })
        .then((res) => {
          res.data.data.forEach((v) => {
            //获取mv地址
            this.axios({
              method: "get",
              url: "/mv/url",
              params: {
                id: v.id,
              },
            })
              .then((res) => {
                let mvData = [
                  {
                    name: v.name,
                    artistName: v.artistName,
                    playCount: v.playCount,
                    mvUrl: res.data.data.url,
                  },
                ];

                mvData.forEach((i) => {
                  this.allData.push(i);
                });
              })
              .catch((err) => {
                
              });
          });
        })
        .catch((err) => {
          
        });
    },

    //获取最新的视频
    getNews() {
      this.axios({
        method: "get",
        url: "/mv/first",
        params: {
          limit: 10,
        },
      })
        .then((res) => {
          res.data.data.forEach((v) => {
            //获取mv地址
            this.axios({
              method: "get",
              url: "/mv/url",
              params: {
                id: v.id,
              },
            })
              .then((res) => {
                let mvData = [
                  {
                    name: v.name,
                    artistName: v.artistName,
                    playCount: v.playCount,
                    mvUrl: res.data.data.url,
                  },
                ];

                mvData.forEach((i) => {
                  this.newsData.push(i);
                });
              })
              .catch((err) => {
                
              });
          });
        })
        .catch((err) => {
          
        });
    },

    //获取获取网易云出品的视频
    getYun() {
      this.axios({
        method: "get",
        url: "/mv/exclusive/rcmd",
        params: {
          limit: 10,
        },
      })
        .then((res) => {
          res.data.data.forEach((v) => {
            //获取mv地址
            this.axios({
              method: "get",
              url: "/mv/url",
              params: {
                id: v.id,
              },
            })
              .then((res) => {
                let mvData = [
                  {
                    name: v.name,
                    artistName: v.artistName,
                    playCount: v.playCount,
                    mvUrl: res.data.data.url,
                  },
                ];

                mvData.forEach((i) => {
                  this.yunData.push(i);
                });
              })
              .catch((err) => {
                
              });
          });
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
//搜索框
.img {
  position: relative;
  right: 4px;
}

.img img {
  width: 20px;
  height: 20px;
}

/deep/.van-search {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 99;
}

/deep/.van-search__action {
  position: relative;
  top: 4px;
}

/deep/.van-search__content {
  padding-left: 26px;
}

// 标签列表
/deep/.van-tabs {
  top: 55px;
}

/deep/.van-tab--active {
  font-weight: 600;
}

// 视频播放
.main {
  margin-bottom: 110px;
}

.video-box {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 16px 10px;
}

.mv {
  width: 100%;
  margin: auto;
  display: block;
  border-radius: 14px;
}

.mvtext {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
}

.mvname {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 4px;
}

.playnum {
  width: 100%;
  & span {
    color: #9f9f9f;
  }
}
</style>